<template>
	<div>
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="按场次" name="first">
				<div>
					<span>拍片分析（场次）</span>
					<div class="banner">
						<el-empty description="暂无数据"></el-empty>
					</div>
					<span>拍片分析列表（场次）</span>
					<div class="banner">
						<el-empty description="暂无数据"></el-empty>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="按座位数" name="second">
				<div>
					<span>拍片分析（场次）</span>
					<div class="banner">
						<el-empty description="暂无数据"></el-empty>
					</div>
					<span>拍片分分析列表（场次）</span>
					<div class="banner">
						<el-empty description="暂无数据"></el-empty>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first'
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
				this.open();
			},
			open() {
				this.$confirm('该功能仅限于SVIP会员使用，你当前为免费会员。建议您选择升级会员，体验完整功能。', '功能使用受损', {
					confirmButtonText: '前往升级',
					cancelButtonText: '我知道了，暂不升级',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '请你付款!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消升级'
					});
				});
			},
		},
		mounted: function() {
			this.open();
		}
	}
</script>

<style>
	.banner {
		height: 100%;
		width: 100%;
		border: 1px solid #ececec;
		border-radius: 2px;
		margin-bottom: 20px;
	}
</style>
